<template>
	<view v-if="datas.length != 0">
		<view v-for="(item, index) in datas" :key="index">
			<view @click="dot(item.id)" class="Box">
				车辆ID：{{item.id}}
			</view>
			<view style="display: flex; width: 90%;margin-left: 5%;">
				<button @click="click1(item.id)" class="select1">
					实时监测
				</button>
				<button @click="click2(item.id)" class="select2">
					控制交互
				</button>
			</view>
		</view>
	</view>
	<view v-else>
		暂无车辆
	</view>
</template>

<script>
	import store from '@/store/index.js'; //需要引入store
	export default {
		created() {
			store.commit("setAllDeviceNull", 1)
		},
		data() {
			return {
				datas: []
			}
		},
		onLoad() {
			this.datas = store.state.allDevice
		},
		computed: {
		},
		watch: {
			allDevice: {
				deep: true,
				handler(newval, oldval) {
					this.allDevice = newval
				}
			},
		},
		methods: {
			click1(id) {
				store.commit("setCarId", id)
				uni.navigateTo({
					url: '../ucharts/ucharts'
				})
			},
			click2(id) {
				store.commit("setCarId", id)
				uni.navigateTo({
					url: '../select/select'
				})
			}
		}
	}
</script>

<style>
	.select1 {
		width: 50%;
		height: 40px;
		font-weight: 600;
		border: 1px solid #f9c327;
		text-align: center;
		line-height: 40px;
	}

	.select2 {
		width: 50%;
		height: 40px;
		font-weight: 600;
		border: 1px solid #f9c327;
		text-align: center;
		line-height: 40px;
	}

	.Box {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10%;
		width: 90%;
		height: 66rpx;
		font-size: 35rpx;
		background-color: #f9c327;
		/* border-radius: 20rpx; */
		margin: 0 auto;
		margin-top: 5%;
		padding: 0;
	}

	.contentLast {
		margin-top: 10%;
	}
</style>
